<template>
  <div class="max-tree">

  </div>
</template>
<script>
import {defineComponent, ref, reactive, toRaw} from 'vue';

export default defineComponent({
  name: 'maxTree',
  setup(props, context) {
    /**
     * 变量列表：
     * currentId：当前编号
     */
    const currentId = ref();
    /**
     * 方法列表：
     * select：树形数据选择
     * findPid：父类编号查找
     */
    const select = (selectedKeys, tree) => {
      let defaultData = findPid(selectedKeys[0], props.treeData);
      context.emit('select', tree.selected, selectedKeys[0], defaultData.pidList);
    }
    const findPid = (id, list) => {
      let result = {success: false, pidList: []};
      list.forEach(obj => {
        if (obj.id === id) {
          result = {success: true, pidList: [id]};
        }
        let findResult = findPid(id, obj.children);
        if (findResult && findResult.success) {
          let pidList = [];
          pidList.push(obj.id);
          pidList.push(...findResult.pidList);
          result = {success: true, pidList: pidList};
        }
      });
      return result;
    }

    return {
      currentId,
      select
    };
  },
  props: {
    treeData: {
      type: Array,
      default: []
    },
    replaceFields: {
      type: Object,
      default: {key: 'id', title: 'name', children: 'children'}
    },
    formData: {
      type: Object,
      default: {}
    }
  }
});
</script>
<style scoped>
.max-tree{
  min-width: 100px;
}
.tree {
  border: 1px solid #f0f0f0;
  height: 533px;
}
</style>